<template>
	<div style="height: 100%;background: #ebebeb;" ref="myDiv">

		<!-- <el-row :gutter="10">
	<div style="text-align: center;font-size:20px;font-weight: 800;height: 60px;line-height: 60px;background: white;">
			{{setName}}
		</div>
		<div style="float:right">
			<el-button @click="againData()">刷新左边数据</el-button>
		</div>
</el-row> -->

		<el-row :gutter="10">

			<el-col :span="24">
				<div style="height: 50px;line-height: 50px;padding-left:15px">
					<span style="display:block;float:left" v-for=" x,index in  buildList">{{x.name}}</span>
				</div>

				<!-- <el-button @click="againData()">刷新左边数据</el-button> -->

			</el-col>

			<el-col :span="6" v-for=" x,index in  buildAllData">
				<div class="grid-content bg-purple">
					<div style="text-align: center;">
						<span style="font-size: 18px;font-weight: 800; padding"></span>
					</div>
					<div style="padding-top:10px;text-align: center;">
						<img :src="x.image" class="image_src" @click="item_click(x)" :height="imageHeight" :width="imageHeight" :onerror="defaultImg" />
					</div>
					<div style="text-align: center;">
						<button style="margin-top: 5px;background: white;color: #3d81ba;border: 0px solid red;padding: 5px 10px;">{{x.name}}</button>
						<button style="margin-top: 5px;background: white;color: #3d81ba;border: 0px solid red;padding: 5px 10px;" @click="update(x)">修改{{x.buildType}}</button>
						<button style="margin-top: 5px;background: white;color: #3d81ba;border: 0px solid red;padding: 5px 10px;" @click="delect(x)">删除{{x.buildType}}</button>
					</div>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content bg-purple">
					<div style="padding-top:10px;text-align: center;height: 34px;">
						<span style="font-size: 18px;font-weight: 800; padding">平面图上传:</span>
					</div>
					<div style="padding-top:10px;text-align: center;">
						<img src="../assets/upload.png" @click="uploadData()" :height="imageHeight" :width="imageHeight" />
					</div>
					<div style="text-align: center;">
						<button style="margin-top: 5px;background: white;color: #3d81ba;border: 0px solid red;padding: 5px 10px;">新增{{buildList.length == 1?'楼宇':addBuildRoomName}}</button>
					</div>
				</div>
			</el-col>
		</el-row>

		<el-dialog title="修改楼层数据" :visible.sync="updateBuildShow" :close-on-click-modal="ss">
			<el-form :model="form">
				<el-form-item label="修改名称">
					<el-input v-model="data.name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="输入排列顺序">
					<el-input v-model="data.sort" placeholder="输入排列顺序"></el-input>
				</el-form-item>
				<el-form-item label="修改楼宇类型">
					<el-select v-model="data.buildType" placeholder="请选择">
						<el-option v-for="item in buildTypeData" :key="item.value" :label="item.value" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传附件:">
					<el-upload class="upload-demo" action='/api/File/UploadFile' :limit="1" :on-success="handleAvatarSuccess1" :before-upload="beforeAvatarUpload" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList2" list-type="picture">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updateBuildShow = false">取 消</el-button>
				<el-button type="primary" @click="sure_updata">确 定</el-button>
			</div>
		</el-dialog>

		<el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal="ss">
			<div style="height: 50px;line-height: 50px;padding-left:15px">
				<span style="display:block;float:left" v-for=" x,index in  buildList">{{x.name}}</span>
				<span>>{{addBuildRoomName}}</span>
			</div>
			<el-form :model="form">
				<el-form-item label="输入名称">
					<el-input v-model="addBuildData.Name" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="输入排列序号">
					<el-input v-model="addBuildData.sort" placeholder="请输入名称"></el-input>
				</el-form-item>
				<el-form-item label="请选择楼宇类型">
					<el-select v-model="buildType" placeholder="请选择">
						<el-option v-for="item in buildTypeData" :key="item.value" :label="item.value" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="上传附件:">
					<el-upload class="avatar-uploader" :limit="1" action="/api/File/UploadFile" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
						<img v-if="imageUrl" :src="imageUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>

				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure_upload">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<style>
	.image_src {
		width: 100%;
	}
</style>
<script>
	import store from "../store/index.js"
	import bus from '../components/Navi/eventBus'
	export default {
		inject: ['reload'],
		data() {
			return {
				addBuildRoomName: "",
				buildTypeData: [{
						value: "楼"
					},
					{
						value: "层"
					},
					{
						value: "房间"
					}
				],
				buildType: "",
				ss: false,
				oldClickBuild: { //用来记录我点击楼层的数据来对比
					id: "",
					name: "",
					buildType: "",
					parentId: ""
				},
				buildList: [{
					id: "",
					name: "全部"
				}],
				updateBuildShow: false,
				imageHeight: "",
				imageUrl: '',
				dialogFormVisible: false,
				setName: "",
				setType: "",
				state: "",
				data: "",
				fileList2: [],
				imageList: {
					name: "",
					url: ""
				},
				defaultImg: 'this.src="' + require('../assets/noImg.png') + '"',
				addBuildData: {
					Name: "",
					sort: "",
					Enabled: true,
					ParentID: "",
					Image: "",
					buildType: ""
				},
				updateBuildData: {
					Name: "",
					Enabled: true,
					ParentID: "",
					Image: "",
					BuildType: "",
					Location_X: "",
					Location_Y: ""
				},
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				getBuildData: {
					ParentId: "",
					Pager: "",
					PageIndex: "",
					PageSize: ""
				},
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				needData: [],
				buildAllData: [],
				parentID: "", //记录下当前点击的parentID
				listHeight: "",
				listWidth: ""
			}
		},
		methods: {
			handleRemove() {

			},

			//点击上面父级以上的
			showChoseBuild(x) {
				var that = this;
				that.buildAllData = [];
				that.getBuildData.ParentId = x.id;
				that.getBuild(that.getBuildData, res => {
					if(x.id == "") {
						for(let i = 0; i < res.data.length; i++) {
							// '/' +     
							res.data[i].image = res.data[i].image
							that.buildAllData.push(res.data[i]);
						}
					} else {
						that.buildAllData = res.data
					}
				})
				var getParentData = {
					ID: x.id
				}

				this.$httpRequest.get('api/Build/getParent', getParentData, response => {
					if(response.isSuccess) {
						this.buildList = [{
							id: "",
							name: "全部"
						}]
						if(response.data == null) {
							var data = {
								id: "",
								name: ""
							}
							data.id = x.id;
							data.name = ">" + x.name;
							this.buildList.push(data);
						} else {
							var data = {
								id: "",
								name: ""
							}
							var data1 = {
								id: "",
								name: ""
							}
							data.id = response.data.id;
							data.name = ">" + response.data.name
							this.buildList.push(data);
							data1.id = x.id;
							data1.name = ">" + x.name;
							this.buildList.push(data1);
						}
					}
				})
				// for(let i = 0; i < that.buildList.length; i++) {
				// 	if(x.id == "") {
				// 		that.buildList = [{
				// 			id: "",
				// 			name: "全部"
				// 		}]
				// 		break
				// 	} else {
				// 		if(that.buildList[i].id == x.id) {
				// 			that.buildList.splice(i, that.buildList.length - i - 1)
				// 			break
				// 		}
				// 	}

				// }
			},
			//确定更改
			sure_updata() {
				this.$httpRequest.post('api/Build/Update', this.data, response => {
					if(response.isSuccess) {
						this.$notify({
							title: '修改楼宇',
							message: '成功',
							type: 'success'
						});
						debugger
						this.$store.dispatch("showIsAgain");
						this.updateBuildShow = false
						this.buildAllData = [];
						this.getBuild(this.getBuildData, res => {
							if(response.isSuccess) {
								for(let i = 0; i < res.data.length; i++) {
									this.buildAllData.push(res.data[i]);
								}
							}
						});
					} else {
						this.dialogFormVisible = false
						this.$notify({
							title: '修改楼宇失败',
							message: response.msg,
							type: 'error'
						});
					}
				})
			},
			//图片上传成功的回调
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
				this.addBuildData.Image = res.data
			},

			//更新图片成功的回调
			handleAvatarSuccess1(res, file) {
				this.data.image = res.data
			},
			//楼层删除的操作
			delect(x) {
				this.$confirm('此操作将永久删除该楼宇, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.delectBuild(x.id);
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//文件的上传
			//			add() {
			//				var image12 = document.getElementById("img").files[0];
			//				var formData = new FormData();
			//// var form = document.getElementById('img'), 
			////  formData = new FormData(form); 
			//				formData.append("file", image12);
			//				var data = {
			//					file:formData
			//				}
			//				this.$httpRequest.post('api/File/UploadFile', formData, response => {
			//					debugger
			//				})
			//			},

			//在图片上传时候做的操作
			beforeAvatarUpload(file) {

			},
			//
			//确定绑定数据
			sure_upload() {
				var that = this;
				this.addBuildData.buildType = this.buildType;
				this.addBuildData.ParentID = this.parentID;
				this.$httpRequest.post('api/Build/Add', this.addBuildData, response => {
					if(response.isSuccess) {
						this.$notify({
							title: '添加楼宇',
							message: '成功',
							type: 'success'
						});
						debugger
						this.$store.dispatch("showIsAgain");
						this.$httpRequest.get('api/Build/GetBuildTree', "", response => {
							if(response.isSuccess) {
								let data = response.data;
								var allData = [{
									name: "全部",
									id: "",
									sub: [],
									buildType: "",
									createDate: "",
									creater: "",
									enabled: "",
									image: "",
									location_X: "",
									location_Y: "",
									parentID: "",
									updater: "",
									updaterDate: ""
								}]
								allData[0].sub = data;

							} else {}
						})
						this.dialogFormVisible = false
						this.buildAllData = [];
						this.getBuild(this.getBuildData, res => {
							if(response.isSuccess) {
								for(let i = 0; i < res.data.length; i++) {
									this.buildAllData.push(res.data[i]);
								}
							}
						});
						//this.$router.push({path: '/other/NavMenu', query: {}});
					} else {
						this.dialogFormVisible = false
						this.$notify({
							title: '添加楼宇失败',
							message: response.msg,
							type: 'error'
						});
					}
				})
			},
			update: function(e) {
				debugger
				this.updateBuildShow = true;
				this.imageList.url = e.image;
				this.data = e;
				this.fileList2 = [];
				this.fileList2.push(this.imageList);
			},
			//进入详情页
			item_click: function(e) {
				let that = this;
				var getParentData = {
					ID: e.id
				}
				this.$httpRequest.get('api/Build/getParent', getParentData, response => {
					if(response.isSuccess) {
						debugger
						this.buildList = [{
							id: "",
							name: "全部"
						}]
						if(response.data == null) {
							var data = {
								id: "",
								name: ""
							}
							data.id = e.id;
							data.name = ">" + e.name;
							this.buildList.push(data);
						} else {
							var data = {
								id: "",
								name: ""
							}
							var data1 = {
								id: "",
								name: ""
							}
							data.id = response.data.id;
							data.name = ">" + response.data.name
							this.buildList.push(data);
							data1.id = e.id;
							data1.name = ">" + e.name;
							this.buildList.push(data1);
						}

					}
				})
				that.getBuildData.ParentId = e.id;
				that.buildAllData = [];
				if(e.buildType == "房间") { //如果是房间的话就进入拖拽控件
					debugger
					this.$router.push({
						path: '/drag',
						params: {
							id: e.id,
							buildList: this.buildList
						},
						query: {
							id: e.id,
							buildList: this.buildList,
							name: e.name
						}
					})
				} else if(e.buildType == "楼") {
					this.addBuildRoomName = "层"
					that.getBuild(that.getBuildData, res => {
						that.buildAllData = res.data
					})
				} else if(e.buildType == "层") {
					this.addBuildRoomName = "房间"
					that.getBuild(that.getBuildData, res => {
						that.buildAllData = res.data
					})
				}
			},
			//上传新数据
			uploadData: function() {
				var that = this;
				that.dialogFormVisible = true;
				debugger

				that.parentID = this.getBuildData.ParentId;
			},
			//获取楼层数据
			getBuild(data, res) {
				this.$httpRequest.get('api/Build/GetList', data, response => {
					if(response.isSuccess) {
						var buildData = response;
						res(buildData);
					} else {

					}
				})
			},
			//删除楼层
			delectBuild(id) {
				var data = {
					ID: id
				}
				this.$httpRequest.post('api/Build/Delete', data, response => {
					if(response.isSuccess) {
						this.buildAllData = [];
						this.$notify({
							title: '楼层删除',
							message: "成功",
							type: 'success'
						});
						debugger
						this.$store.dispatch("showIsAgain");
						this.getBuild(this.getBuildData, res => {
							if(response.isSuccess) {
								for(let i = 0; i < res.data.length; i++) {
									this.buildAllData.push(res.data[i]);
								}
							}
						});
					} else {

					}
				})
			},
			getData() {
				let curMenuIndex = this.$router.query && this.$router.query.curMenuIndex || [0];
				let data = [];
				if(curMenuIndex && curMenuIndex.length === 2) {
					data = this.State.menuData[curMenuIndex[0] - 0];
				} else if(curMenuIndex && curMenuIndex.length === 1) {
					data = this.State.menuData[curMenuIndex[0] - 0];
				}
				console.log('data', data);
			}
		},
		watch: {
			beforeRouteUpdate(to, from, next) {
				// 在当前路由改变，但是该组件被复用时调用
				// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
				// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
				// 可以访问组件实例 `this`
				this.reload();
			},
			State(newVal, oldVal) {
				console.log('getState', newVal);
				this.State = val;
				this.getData();
			},
			　　 // 利用watch方法检测路由变化：
			　　'$route': function(to, from) {
				debugger
				if(to.query.id == "" || to.query.id == undefined) {
					this.buildList = [{
						id: "",
						name: "全部"
					}]
					this.getBuildData.ParentId = ""
					this.getBuild(this.getBuildData, res => {
						if(res.isSuccess) {
							this.buildAllData = [];
							for(let i = 0; i < res.data.length; i++) {
								this.buildAllData.push(res.data[i]);
							}
						}
					});
				} else {
					this.buildAllData = [];
					var getParentData = {
						ID: to.query.id
					}
					debugger
					this.$httpRequest.get('api/Build/getParent', getParentData, response => {
						if(response.isSuccess) {
							this.buildList = [{
								id: "",
								name: "全部"
							}]
							if(response.data == null) {
								var data = {
									id: "",
									name: ""
								}
								data.id = to.query.id;
								data.name = ">" + to.query.name;
								this.buildList.push(data);
							} else {
								var data = {
									id: "",
									name: ""
								}
								var data1 = {
									id: "",
									name: ""
								}
								data.id = response.data.id;
								data.name = ">" + response.data.name
								this.buildList.push(data);
								data1.id = to.query.id;
								data1.name = ">" + to.query.name;
								this.buildList.push(data1);
							}
							// 拿到目标参数 to.query.id 去再次请求数据接口
							if(to.query.buildType == "房间") { //如果是房间的话就进入拖拽控件
								debugger
								this.$router.push({
									path: '/drag',
									params: {
										id: to.query.id,
										buildList: this.buildList
									},
									query: {
										id: to.query.id,
										buildList: this.buildList,
										name: to.query.name
									}
								})
							} else if(to.query.buildType == "楼") {
								this.addBuildRoomName = "层"
								debugger
								this.getBuildData.ParentId = to.query.id
								this.getBuild(this.getBuildData, res => {
									if(res.isSuccess) {
										this.buildAllData = [];
										for(let i = 0; i < res.data.length; i++) {
											this.buildAllData.push(res.data[i]);
										}
									}
								});
							} else if(to.query.buildType == "层") {
								this.addBuildRoomName = "房间"
								debugger
								this.getBuildData.ParentId = to.query.id
								this.getBuild(this.getBuildData, res => {
									if(res.isSuccess) {
										this.buildAllData = [];
										for(let i = 0; i < res.data.length; i++) {
											this.buildAllData.push(res.data[i]);
										}
									}
								});
							}
						}
					})
				}
			}
		},
		computed: {

		},
		mounted() {
			this.listHeight = window.getComputedStyle(this.$refs.myDiv).height;
			this.listWidth = window.getComputedStyle(this.$refs.myDiv).width;
			this.imageHeight = (this.listWidth.substring(0, this.listWidth.indexOf("px")) / 4) - 30;
		},
		created: function() {
			debugger
			var that = this;
			if(this.$route.query.parentId == undefined && this.$route.query.id == "" || this.$route.query.id == undefined) {
				let that = this;
				that.getBuildData.ParentId = this.$route.query.id;
				that.setName = "楼宇设置"
				that.uploadName = "上传楼宇"
				that.getBuild(this.getBuildData, res => {
					if(res.isSuccess) {
						for(let i = 0; i < res.data.length; i++) {
							that.buildAllData.push(res.data[i]);
						}
					}
				});
			} else if(this.$route.query.id == "" || this.$route.query.id == undefined) {

			} else {
				var getParentData = {
					ID: this.$route.query.id
				}
				this.$httpRequest.get('api/Build/getParent', getParentData, response => {
					if(response.isSuccess) {
						this.buildList = [{
							id: "",
							name: "全部"
						}]
						if(response.data == null) {
							var data = {
								id: "",
								name: ""
							}
							data.id = this.$route.query.id;
							data.name = ">" + this.$route.query.name;
							this.buildList.push(data);
						} else {
							var data = {
								id: "",
								name: ""
							}
							var data1 = {
								id: "",
								name: ""
							}
							data.id = response.data.id;
							data.name = ">" + response.data.name
							this.buildList.push(data);
							data1.id = this.$route.query.parentId;
							data1.name = ">" + this.$route.query.name;
							this.buildList.push(data1);
						}
						this.buildAllData = [];
						if(this.$route.query.buildType == "房间") { //如果是房间的话就进入拖拽控件
							debugger
							this.$router.push({
								path: '/drag',
								params: {
									id: this.$route.query.id,
									buildList: this.buildList,

								},
								query: {
									id: this.$route.query.id,
									buildList: this.buildList,
									name: this.$route.query.name
								}
							})
						} else if(this.$route.query.buildType == "楼") {
							this.addBuildRoomName = "层"
							this.getBuildData.ParentId = this.$route.query.id
							this.getBuild(this.getBuildData, res => {
								if(res.isSuccess) {
									this.buildAllData = [];
									for(let i = 0; i < res.data.length; i++) {
										this.buildAllData.push(res.data[i]);
									}
								}
							});
						} else if(this.$route.query.buildType == "层") {
							this.addBuildRoomName = "房间"
							this.getBuildData.ParentId = this.$route.query.id
							this.getBuild(this.getBuildData, res => {
								if(res.isSuccess) {
									this.buildAllData = [];
									for(let i = 0; i < res.data.length; i++) {
										this.buildAllData.push(res.data[i]);
									}
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}
	
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>